<template>
	<a-drawer
        title="打印报告"
        :width="1200"
        :visible="visible1"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <div style="float: left; width: 70%">
          <div class="burr_f-haibao" v-if="count == 0">
            <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
          </div>
          <div class="burr_f-haibao" v-if="count == 1">
            <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
          </div>
          <div class="burr_f-haibao" v-if="count == 2">
            <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
          </div>
        </div>
        <div style="float: left; width: 30%; positon: relative">
          <a-form :form="form" layout="vertical" hide-required-mark style="margin-left: 50px; margin-bottom: 0">
            <a-row>
              <a-col :span="12">
                <a-form-item label="目标打印机">
                  <a-select default-value="1">
                    <a-select-option value="1"> 请选择 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="页面" style="postion: absolute; top: -80px">
                  <a-select default-value="1">
                    <a-select-option value="1"> 全部 </a-select-option>
                    <a-select-option value="2"> 自定义 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="布局" style="postion: absolute; top: -160px">
                  <a-select default-value="1">
                    <a-select-option value="1"> 纵向 </a-select-option>
                    <a-select-option value="2"> 横向 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item label="彩色" style="postion: absolute; top: -230px">
                  <a-select default-value="1">
                    <a-select-option value="1"> 彩色 </a-select-option>
                    <a-select-option value="2">黑白色</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
          }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose"> 取消 </a-button>
          <a-button type="primary" @click="onClose"> 打印 </a-button>
        </div>
    	</a-drawer>
      
</template>

<script>
	export default {
    name: "PrintReport",
	data() {
		return {
			visible1: false,
		}
	},
	created() {},
	methods: {
		showDrawer() {
			this.count = 0
			let that = this
			let domObj = document.getElementById('posterHtml')
			html2canvas(domObj, {
				useCORS: true,
				allowTaint: false,
				logging: false,
				letterRendering: true,
				onclone(doc) {
					let e = doc.querySelector('#posterHtml')
					e.style.display = 'block'
				},
			}).then((canvas) => {
				that.posterImg = canvas.toDataURL('image/png')
			})
			this.visible1 = true
		},
		onClose() {
			this.visible1 = false
			this.posterImg = require('../../../../assets/spin.gif')
			this.$emit('close');
		},
	}
}</script>

<style>
</style>